<template>
    <div>
        <!-- 搜索框 -->
        <van-search shape="round" v-model.trim="value" placeholder="请输入搜索关键词" @input="sousuo" />


        <!-- 热搜关键字 -->
        <div class="search_wrap" v-if="!value">
            <h2 class="hot_title">热门搜索</h2>
            <div class="hot_name_wrap">
                <span class="hot_item" v-for="obj,index in hotlist" :key="index"
                    @click="hotword(obj.first)">{{obj.first}}</span>
            </div>
        </div>

        <!-- 最佳匹配 -->
        <div v-else>
            <h2 class="title">最佳匹配</h2>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <songitem v-for="obj in cloudsearchList" :key="obj.id" :songname="obj.name" :songId="obj.id"
                    :singename="miaoshu1(obj)" />
            </van-list>
        </div>



    </div>
</template>

<script>
    import {
        GetHotListAPI,
        getcloudsearchListAPI
    } from '@/api'
    import songitem from '@/components/songitem.vue'
    let page = 0
    export default {
        components: {
            songitem

        },
        data() {
            return {
                hotlist: [],
                cloudsearchList: [],
                value: '',
                // 到底触发
                loading: false,
                finished: false,
            }
        },
        methods: {


            // 搜索框数据
            async sousuo() {
                const resp = await getcloudsearchListAPI({
                    keywords: this.value,
                    limit: 20,
                    offset: (page - 1) * 20
                })
                this.cloudsearchList = resp.data.result.songs

            },
            async hotword(val) {
                console.log(12346);
                this.value = val
                page = 1
                const resp = await getcloudsearchListAPI({
                    keywords: val,
                    limit: 20,
                    offset: (page - 1) * 20
                })
                this.cloudsearchList = resp.data.result.songs
            },
            miaoshu1(obj) {
                return obj.ar[0].name + ' - ' + obj.name
            },





            async onLoad() {
                page++
                const resp = await getcloudsearchListAPI({
                    keywords: this.value,
                    limit: 20,
                    offset: (page - 1) * 20
                })
                console.log(resp);
                this.cloudsearchList = [...this.cloudsearchList, ...resp.data.result.songs]
                this.loading = false
                if (this.cloudsearchList.length >= 100) {
                    this.finished = true
                }
            },










        },





        created() {
            GetHotListAPI().then(resp => {
                this.hotlist = resp.data.result.hots
            })


        },


    }
</script>

<style>
    /* 搜索容器的样式 */
    .search_wrap {
        padding: 0.266667rem;
    }

    /*热门搜索文字标题样式 */
    .hot_title {
        font-size: 0.32rem;
        color: #666;
    }

    /* 热搜词_容器 */
    .hot_name_wrap {
        margin: 0.266667rem 0;
    }

    /* 热搜词_样式 */
    .hot_item {
        display: inline-block;
        height: 0.853333rem;
        margin-right: 0.213333rem;
        margin-bottom: 0.213333rem;
        padding: 0 0.373333rem;
        font-size: 0.373333rem;
        line-height: 0.853333rem;
        color: #333;
        border-color: #d3d4da;
        border-radius: 0.853333rem;
        border: 1px solid #d3d4da;
    }
</style>